



const Product = {

    template: `
        
        <el-card>
        <template #header>
        

            <el-row>
            

              <el-col class="flexsc" :span="16" >
              
                <el-button @click='handleAddProduct'>添加商品</el-button>
              
              </el-col>  
                <el-col :span="8">
                
                <el-input 

                        v-model="paginationParam.searchString"
                        type="text"
                        suffix-icon="search"
                        @keydown.enter="handleReturn"/>
                
                </el-col>

                

            </el-row>
        
        </template>

         <template #default>

            <el-table :data="tableData" height='90%'>               

                <el-table-column prop="id" label="ID" />
                <el-table-column prop="num" label="NAME" />
                <el-table-column prop="name" label="GENDER" />
                <el-table-column prop="unit" label="UNIT" />
                <el-table-column prop="price" label="PRICE" />
                <el-table-column prop="alias" label="ALIAS" />
    
                </el-table>
           
                 

 
                
                </template>
                 <template #footer>

           
           
               
              <div style="padding: 10px 5px">

                     <el-pagination background layout="sizes,prev, pager, next,total,jumper" v-model:total="paginationParam.total"  
                     v-model:page-size="paginationParam.pageSize"
                     v-model:current-page="paginationParam.currentPage"
                     :page-sizes="[2,3,4,5,10]"
                     
                     small
                     @size-change="handleChange"
                     @current-change="handleChange"
                     
                     
                     />

                </div>
            
   
                 
                
                </template>

                 </el-card>

                 <el-dialog></el-dialog>
 

            `,
    
    props : {
        title:String
    },


    setup() {


        

        const searchString = Vue.ref("")
        const tableData = Vue.ref([])
        const myTitle = Vue.ref("Product 数据展示")
        const handleAddProduct =()=>{

        }
        const paginationParam = Vue.ref({

                total: 100,
                currentPage: 1,
                pageSize: 5,
                searchString: ""


            })
        message = Vue.ref('这是Product组件');

            const fetchData = async () => {

                const url = "http://yhdn.cn:5000/pagination/yhdn/product";
                const response = await fetch(url,
                    {
                        method: 'POST',
                        headers: {
                            'content-type': "application/json"
                        },
                        body: JSON.stringify(paginationParam.value)

                    });
                const jsonData = await response.json();
                tableData.value = jsonData.rows
                paginationParam.value.total = jsonData.total


            }



        const handleChange = () => {

                const pageSize = paginationParam.value.pageSize
                const currentPage = paginationParam.value.currentPage
                fetchData()
            }

        const handleReturn = () => {

                fetchData()


            }

        Vue.onMounted(() => {


                fetchData()


            })

        return {

                message,
                tableData,
                paginationParam,
                handleChange,
                searchString,
                handleReturn,
                myTitle,
                handleAddProduct
            }

        }


}

